<template>
  <div class="welcome">
    <div class="contractDetail mb8">
      <div class="content">
        <div
          class="type"
          :class="
            sectiontDetail.sectionType === '1'
              ? 'civilConstruction'
              : sectiontDetail.sectionType === '2'
              ? 'equipment'
              : 'serve'
          "
        >
          {{ sectionTypeEnum[sectiontDetail.sectionType] || "" }}
        </div>
        <div class="right">
          <div class="sectionName">
            {{ sectiontDetail.sectionName || "" }}
          </div>
          <div class="sectionCode">
            <span>{{ sectiontDetail.sectionCode || "" }}</span> |
            <span
              class="copy"
              @click="copyText(sectiontDetail.sectionCode || '')"
              >复制</span
            >
          </div>
        </div>
        <div class="checkDocument">
          <span class="checkSpan"
            >查看合同文书 <el-icon><ArrowRight /></el-icon
          ></span>
          <div class="documentList">
            <div
              class="documentItem"
              v-for="(i, j) in defaultFileList"
              :key="j"
            >
              <span
                class="documentName"
                @click="openDocument(i)"
                :title="i.name"
                >{{ i.name }}</span
              >
              <span class="documenDownLoad" @click="documenDownLoadClick(i)"
                >下载</span
              >
            </div>
            <el-empty
              v-if="defaultFileList.length === 0"
              :image-size="100"
              description="暂无数据"
            ></el-empty>
          </div>
        </div>
      </div>
      <div class="moneyDatail">
        <div class="sectiontMoney">
          <div class="contractAmount">
            <div class="label">合同金额（含税，元）</div>
            <div class="value">￥{{ sectiontDetail.contractAmount }}</div>
          </div>
          <div class="sectiontline"></div>
          <div class="currencyAmountNoTax">
            <div class="label">合同金额（不含税，元）</div>
            <div class="value">￥{{ sectiontDetail.currencyAmountNoTax }}</div>
          </div>
        </div>
        <div class="paymentAmount">
          <div class="label">付款金额（元）</div>
          <div class="value">￥{{ paymentTransfer.paymentAmountSum }}</div>
          <div class="rate">
            <el-progress
              :percentage="paymentTransfer.paymentAmountRate"
              color="#F08201"
            />
          </div>
        </div>
        <div class="preTransfer">
          <div class="label">预转固金额（元）</div>
          <div class="value">￥{{ paymentTransfer.preTransferSum }}</div>
          <div class="rate">
            <el-progress
              :percentage="paymentTransfer.preTransferRate"
              color="#0073E5"
            />
          </div>
          <div class="tag">预转固</div>
        </div>
        <div class="transfer">
          <div class="label">正式转固金额（元）</div>
          <div class="value">￥{{ paymentTransfer.transferSum }}</div>
          <div class="rate">
            <el-progress
              :percentage="paymentTransfer.transferRate"
              color="#2EB82E"
            />
          </div>
          <div class="tag">正式转固</div>
        </div>
      </div>
    </div>
    <div class="flex" v-if="sectionType === '1'">
      <div class="left">
        <div class="flex mb8">
          <span
            @click="goBack"
            style="
              color: #5298ff;
              position: absolute;
              top: -42px;
              z-index: 7777;
              right: 20px;
              cursor: pointer;
            "
            >返回</span
          >
          <el-row class="info-box">
            <el-col :span="14"><span class="text">单体数量</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                detailData.monomerTotal
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="14"><span class="text">文档数量</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                detailData.documentTotal
              }}</span></el-col
            >
          </el-row>
        </div>
        <div class="static-box chart-box">
          <div class="title-box">
            <p class="title-doc">单体提单量概览</p>
            <!-- <span class="icon-wrap">
              <SvgIcon name="xiazai" :size="16" />
            </span> -->
          </div>
          <div class="chart-wrap mb16 h240"><monor-bar></monor-bar></div>
          <div class="title-box">
            <p class="title-doc mb8">各类验收检查提单统计</p>
            <div class="flex">
              <el-select v-model="monorId" class="custom-select">
                <el-option
                  class="default-option"
                  v-for="item in monorList"
                  :label="item.engineerName"
                  :key="item.id"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- <span class="icon-wrap">
                <SvgIcon name="xiazai" :size="16" />
              </span> -->
            </div>
          </div>
          <div class="chart-wrap mb16 h232" v-loading="typeSum">
            <build-type-sum :monorId="monorId"></build-type-sum>
          </div>
          <div class="title-box">
            <p class="title-doc mb8">单体各验收类型提单概览</p>
            <div class="flex">
              <el-select v-model="typeId" class="custom-select">
                <el-option
                  class="default-option"
                  v-for="item in typeList"
                  :label="item.dicValue"
                  :key="item.dicCode"
                  :value="item.dicCode"
                ></el-option>
              </el-select>
              <!-- <span class="icon-wrap">
                <SvgIcon name="xiazai" :size="16" />
              </span> -->
            </div>
          </div>
          <div class="chart-wrap h232">
            <monor-type-chart :typeId="typeId"></monor-type-chart>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="flex mb8">
          <el-row class="info-box">
            <el-col :span="14"><span class="text">总提单量</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                detailData.totalStandardBill
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="14"><span class="text">总提单率</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                detailData.totalStandardBill && detailData.totalLadingBill
                  ? (
                      (detailData.totalLadingBill /
                        detailData.totalStandardBill) *
                      100
                    ).toFixed(1) + "%"
                  : "0%"
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="14"><span class="text">总提单完成率</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                detailData.totalStandardBill && detailData.totalLadingBill
                  ? (
                      (reportData.completeTotal /
                        detailData.totalStandardBill) *
                      100
                    ).toFixed(1) + "%"
                  : "0%"
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="12"
              ><span class="text">随手拍提单量<br />(完成率)</span></el-col
            >
            <el-col :span="6"
              ><span class="text number center">{{
                detailData.snapshotTotal
              }}</span></el-col
            >
            <el-col :span="6"
              ><span class="text number min"
                >({{
                  detailData.snapshotTotal && detailData.snapshotComplete
                    ? (
                        (detailData.snapshotComplete /
                          detailData.snapshotTotal) *
                        100
                      ).toFixed(1) + "%"
                    : "0%"
                }})</span
              ></el-col
            >
          </el-row>
        </div>
        <div class="static-box scene mb8">
          <div class="process mb8">
            <p class="label-text">
              <span class="icon">
                <SvgIcon name="shigongjindu" size="40" />
              </span>
              <span class="text">施工进度</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="标段验收进度统计数据来源为：标段内所有单体质量检查、材料验收提单量统计数据"
                placement="top-start"
              >
                <SvgIcon name="queren" :size="16" class="iconf"></SvgIcon>
              </el-tooltip>
            </p>
            <div class="pro-box">
              <div class="bar-bg" ref="amountBarRef">
                <div
                  class="bar-status"
                  ref="statusBarRef"
                  :style="{ width: `${process}%` }"
                ></div>
              </div>
              <div class="text-bar">
                <div
                  class="bar-amount rate"
                  ref="amountRateRef"
                  :style="rateStyle"
                >
                  {{ detailData.qtyMaterialLadingBill }}（{{ process }}%）
                </div>
                <div ref="amountRef" class="bar-amount">
                  {{ detailData.qtyMaterialStandardBill }}
                </div>
              </div>
            </div>
          </div>
          <div class="photo-box">
            <p class="label-text mb8">近期现场实况</p>
            <div class="swipers">
              <div class="swiper swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in swiperImgList"
                    :key="index"
                    @click="clickImg(item)"
                  >
                    <!-- <img :src="item.url" alt="pic" /> -->
                    <previewImg
                      :files="item.recentlyUploadAttachment"
                    ></previewImg>
                    <div class="text-box">
                      <p class="text">{{ item.monomerName }}</p>
                      <p class="text mt2">{{ item.uploadDate }}</p>
                    </div>
                  </div>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
              </div>
              <div class="swiper-button-prev">
                <i class="snowfont icon-fanhui"></i>
              </div>
              <div class="swiper-button-next">
                <i class="snowfont icon-jixu"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="static-box doc">
          <p class="title-doc">验收单据状态统计</p>
          <div class="flex mb30">
            <div class="chart-wrap pie">
              <status-pie></status-pie>
              <div class="rate-num">
                <div class="num">
                  {{
                    detailData.totalStandardBill && detailData.totalLadingBill
                      ? (
                          (detailData.totalLadingBill /
                            detailData.totalStandardBill) *
                          100
                        ).toFixed(1) + "%"
                      : "0%"
                  }}
                </div>
                <div class="text">提单率</div>
              </div>
            </div>
            <div class="num-wrap">
              <div class="num-wrap-title"><p>验收单据详细信息</p></div>
              <div class="flex mb8">
                <div class="num-box">
                  <span>处理中</span>
                  <span class="num">{{ flowStatusData.doingTotal }}</span>
                </div>
                <div class="num-box">
                  <span>处理中比率</span>
                  <span class="num">{{
                    flowStatusData.billTotal && flowStatusData.doingTotal
                      ? (
                          (flowStatusData.doingTotal /
                            flowStatusData.billTotal) *
                          100
                        ).toFixed(1) + "%"
                      : "0%"
                  }}</span>
                </div>
              </div>
              <div class="flex">
                <div class="num-box">
                  <span>滞留单据</span>
                  <span class="num">{{ flowStatusData.retentionTotal }}</span>
                </div>
                <div class="num-box">
                  <span>滞留单比率</span>
                  <span class="num">{{
                    flowStatusData.billTotal && flowStatusData.retentionTotal
                      ? (
                          (flowStatusData.retentionTotal /
                            flowStatusData.billTotal) *
                          100
                        ).toFixed(1) + "%"
                      : "0%"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 表格区 -->
          <div class="list-page">
            <el-skeleton
              style="height: 50vh"
              :rows="8"
              :loading="loading"
              animated
            >
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :header-cell-style="{
                  background: '#FFD199',
                  color: '#000',
                  height: '48px',
                  borderTop: '1px soild #E4E8F2'
                }"
              >
                <template #empty>
                  <el-empty :image-size="150" description="暂无数据"></el-empty>
                </template>

                <el-table-column type="index" label="序号" width="50">
                  <template v-slot="scope">
                    <span>{{
                      (pageState.pageNum - 1) * pageState.pageSize +
                      scope.$index +
                      1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="billName" label="单据名称">
                </el-table-column>
                <el-table-column prop="billType" label="单据类型">
                  <template #default="{ row }">
                    {{ formatterStatusType(row) }}
                  </template>
                </el-table-column>
                <el-table-column label="待处理人">
                  <template #default="{ row }">
                    <span class="text--info">
                      {{ row.curHandleUserName }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="curHandleTime"
                  label="到达时间"
                  width="160"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template #default="{ row }">
                    <el-popconfirm
                      title="发送催办后，单据处理人将收到该单据消息提示。确认发送催办？"
                      :hide-icon="true"
                      @confirm="UrgingBtn(row)"
                    >
                      <template #reference>
                        <el-button
                          type="text"
                          size="small"
                          v-auth="`/projectsS/index--press`"
                          >催办</el-button
                        >
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <re-pagination
                v-if="total > 0"
                :total="total"
                v-model:page="pageState.pageNum"
                v-model:limit="pageState.pageSize"
                @pagination="handleChangePage"
                :pageSizes="pageSizes"
                :pager-count="4"
              />
            </el-skeleton>
          </div>
        </div>
      </div>
    </div>
    <div class="flex" v-else>
      <div class="left">
        <div class="flex mb8">
          <span
            @click="goBack"
            style="
              color: #5298ff;
              position: absolute;
              top: -42px;
              z-index: 7777;
              right: 20px;
              cursor: pointer;
            "
            >返回</span
          >
          <el-row class="info-box">
            <el-col :span="14"><span class="text">标段成员</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                equipData.sectionUserTotal
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="14"><span class="text">阶段</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                equipData.stageTotal
              }}</span></el-col
            >
          </el-row>
        </div>
        <div class="static-box chart-box">
          <div class="title-box">
            <p class="title-doc">事项状态概览</p>
            <!-- <span class="icon-wrap">
              <SvgIcon name="xiazai" :size="16" />
            </span> -->
          </div>
          <div class="chart-wrap mb16 h240">
            <equip-pie></equip-pie>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="flex mb8">
          <el-row class="info-box">
            <el-col :span="14"><span class="text">事项</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                equipData.taskTotal
              }}</span></el-col
            >
          </el-row>
          <el-row class="info-box">
            <el-col :span="14"><span class="text">事项完成率</span></el-col>
            <el-col :span="10"
              ><span class="text number">{{
                equipData.taskTotal && equipData.taskCompleteTotal
                  ? (
                      (equipData.taskCompleteTotal / equipData.taskTotal) *
                      100
                    ).toFixed(1) + "%"
                  : "0%"
              }}</span></el-col
            >
          </el-row>
        </div>
        <div class="static-box doc">
          <p class="title-doc">各阶段事项进度</p>
          <div class="flex mb30">
            <div class="chart-wrap h240">
              <equip-type-sum :monorId="monorId"></equip-type-sum>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      modal-class="my-dialog"
      v-model="showDialog"
      title="近期现场实况"
      destroy-on-close
      width="956px"
      @close="handleCancel"
    >
      <div v-if="!showMore">
        <div class="d-box d-flex">
          <div class="d-left">
            <span>{{ activeImg?.monomerName }}</span>
            <span class="d-line"></span>
            <span>{{
              activeImg?.uploadDate
                ? dayjs(activeImg.uploadDate).format("YYYY年MM月DD日")
                : ""
            }}</span>
          </div>
          <div class="d-right" @click="showMoreFunc">
            <span>查看更多</span>
            <span><i class="snowfont icon-jixu"></i></span>
          </div>
        </div>
        <div class="d-box img-wrap">
          <div class="img-box-1" v-loading="activeImg?.loading">
            <img v-if="activeImg?.url" :src="activeImg?.url" alt="pic" />
          </div>
        </div>
      </div>
      <div v-else class="scroll-content">
        <div class="d-box flex h24">
          <div class="d-right" @click="showMore = false">
            <span><i class="snowfont icon-fanhui"></i></span>
            <span class="back ml10">返回</span>
          </div>
          <div class="d-left">
            <span class="d-line"></span>
            <span class="ml10">{{ activeImg?.monomerName }}</span>
          </div>
        </div>
        <div class="d-box d-box-wrap">
          <div
            class="d-wrap"
            v-for="(item, index) in dialogImgList"
            :key="index"
          >
            <p>{{ dayjs(item.uploadDate).format("YYYY年MM月DD日") }}</p>
            <div class="d-img-flex">
              <div class="img-box-2" v-for="(i, t) in item.imgList" :key="t">
                <previewImg :files="i"></previewImg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import { postDictList } from "/@/api/home";
import buildTypeSum from "./charts/buildTypeSum.vue";
import statusPie from "./charts/statusPie.vue";
import monorBar from "./charts/monorBar.vue";
import monorTypeChart from "./charts/monorTypeChart.vue";
import equipTypeSum from "./charts/equipTypeSum.vue";
import equipPie from "./charts/equipPie.vue";
import RePagination from "/@/components/RePagination/index.vue";
import SvgIcon from "/@/components/SvgIcon/index.vue";
import { BillStatusMap } from "../approval/types";
import "swiper/css/swiper.css"; // 导入样式
import Swiper from "swiper";
import { previewImage, downloadFile } from "/@/utils/ecm";
import previewImg from "/@/components/previewImg/index.vue";
import { storageLocal } from "/@/utils/storage";
import dayjs from "dayjs";
import { reportStatus } from "/@/api/analysis";
import NotifMessage from "/@/utils/message/notification";
import {
  reportTop,
  monDictList,
  acceptanceFlowStatus,
  billList,
  picMonList,
  deviceTop,
  billUrging
} from "/@/api/analysis";
import { getPaymentTransfer } from "/@/api/contractPayment";

import {
  monomerPicList,
  getSectionInfo,
  getContractBook
} from "/@/api/projects";
import { useRouter } from "vue-router";

let process = ref(0);
const amountRef = ref<HTMLElement | null>(null) as any;
const amountRateRef = ref<HTMLElement | null>(null) as any;
const amountBarRef = ref<HTMLElement | null>(null) as any;
const statusBarRef = ref<HTMLElement | null>(null) as any;
let rateStyle = ref({}) as any;

const pageSizes = [5, 10, 20, 30, 50];
const tableData = ref([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);
const router = useRouter();
const pageState = reactive({
  pageNum: 1,
  pageSize: 5
});

let monorId = ref(""); // 单体
let monorList = ref([]);

let typeId = ref(); // 类型
let typeList = ref([]) as any;
let showDialog = ref(false);
let showMore = ref(false);
let activeImg = ref({ loading: true }) as any;
let swiperImgList = ref([]);
let dialogImgList = ref([]);
let mySwiper = ref(null);
let sectionId = storageLocal.getItem("sectionInfo")?.id;
let projectManageId = storageLocal.getItem("projectInfo")?.id;
let sectionType = storageLocal.getItem("sectionInfo")?.sectionType;
let sectiontDetail = ref({}) as any;
let paymentTransfer = ref({}) as any;
let sectionTypeEnum = ref({
  "1": "土建",
  "2": "设备",
  "3": "",
  "4": "服务"
}) as any;
let defaultFileList = ref([]) as any;

let detailData = ref({
  documentTotal: 0,
  monomerTotal: 0,
  qtyMaterialLadingBill: 0,
  qtyMaterialStandardBill: 0,
  snapshotComplete: 0,
  snapshotTotal: 0,
  totalLadingBill: 0,
  totalStandardBill: 0
});

// 设备类数据
let equipData = ref({
  sectionUserTotal: 0,
  stageTotal: 0,
  taskTotal: 0,
  taskCompleteTotal: 0
});

//验收单据数据
let reportData = ref({
  completeTotal: 0,
  noStartTotal: 0,
  doingTotal: 0
});

// 滞留单据信息
let flowStatusData = ref({
  billTotal: 0,
  doingTotal: 0,
  retentionTotal: 0
});

// 轮播图图片
const swiperImgListInit = async () => {
  try {
    const { code, data } = await picMonList({
      projectManageId,
      sectionId
    });
    if (code === 200) {
      let list = data.list;
      list.map(item => {
        item.recentlyUploadAttachment = item.recentlyUploadAttachment
          ? JSON.parse(item.recentlyUploadAttachment)
          : [];
      });
      swiperImgList.value = list;
    }
  } catch (err) {
    console.log(err);
  }
};

const goBack = () => {
  const projectTypeCode = storageLocal.getItem("projectInfo")?.projectTypeCode;
  if (["B", "S"].includes(projectTypeCode)) {
    router.push(`/projectsB/manage/archives`);
    return;
  }
  router.push(`/projectsA/proManage/section`);
};

// 查看更多图片
const showMoreFunc = async () => {
  showMore.value = true;
  try {
    const { code, data } = await monomerPicList({
      monomerId: activeImg.value?.monomerId
    });
    if (code === 200) {
      let list = data.list;
      let dayList = [];
      list.forEach(item => {
        item.imgList = item.dayAttachment ? JSON.parse(item.dayAttachment) : [];
        dayList.push(item);
      });
      dialogImgList.value = dayList;
    }
  } catch (err) {
    console.log(err);
  }
};

// 获取文本数据
const getData = async () => {
  try {
    let param = {
      sectionId,
      projectId: projectManageId
    };
    const { code, data } = await reportTop(param);
    if (code === 200) {
      detailData.value = { ...data };
      process.value =
        data?.qtyMaterialStandardBill && data?.qtyMaterialLadingBill
          ? (
              (data?.qtyMaterialLadingBill / data?.qtyMaterialStandardBill) *
              100
            ).toFixed(1)
          : 0;
    }
  } catch (err) {
    console.log(err);
  }
};

// 获取单体
const typeSum = ref(false);
const getMonorList = async () => {
  try {
    typeSum.value = true;
    let param = {
      sectionId,
      projectManageId
    };
    const { code, data } = await monDictList(param);
    if (code === 200) {
      let list = data || [];
      monorList.value = [{ engineerName: "所有单体", id: "" }].concat(list);
      swiperImgListInit();
    }
  } catch (err) {
    console.log(err);
  } finally {
    typeSum.value = false;
  }
};

// 验收类型
const initTypeList = async () => {
  try {
    const { data } = await postDictList({ dicType: "thd_acc_module" });
    typeList.value = data || [];
    typeId.value = data[0]?.dicCode;
  } catch (err) {
    console.log(err);
  }
};

//获取滞留单据信息
const getFlowStatus = async () => {
  try {
    const { code, data } = await acceptanceFlowStatus({
      projectManageId,
      sectionId
    });
    if (code === 200) {
      flowStatusData.value = { ...data };
    }
  } catch (err) {
    console.log(err);
  }
};

//获取数据列表
const getTableList = async params => {
  try {
    loading.value = true;
    const { code, data } = await billList({
      projectManageId,
      sectionId,
      ...params
    });
    if (code === 200) {
      tableData.value = data.list;
      total.value = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

// 格式化类型
const formatterStatusType = row => {
  return row?.billType && BillStatusMap.get(row.billType);
};

const handleChangePage = () => {
  getTableList(pageState);
};

const initSwiper = () => {
  mySwiper.value = new Swiper(".swiper", {
    direction: "horizontal",
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    // slidesPerView: 5.3,
    slidesPerView: "auto"
  });
};

// 设备类数据
const getEquipData = async () => {
  try {
    let param = {
      sectionId,
      projectManageId
    };
    const { code, data } = await deviceTop(param);
    if (code === 200) {
      equipData.value.sectionUserTotal = data?.sectionUserTotal || 0;
      equipData.value.stageTotal = data?.stageTotal || 0;
      equipData.value.taskTotal = data?.taskTotal || 0;
      equipData.value.taskCompleteTotal = data?.taskCompleteTotal || 0;
    }
  } catch (err) {
    console.log(err);
  }
};

const getReportData = async () => {
  try {
    let sectionId = storageLocal.getItem("sectionInfo")?.id;
    let projectManageId = storageLocal.getItem("projectInfo")?.id;
    const { code, data } = await reportStatus({
      sectionId,
      projectManageId
    });
    if (code === 200) {
      reportData.value.completeTotal = data?.completeTotal || 0;
      reportData.value.completeTotal = data?.completeTotal || 0;
      reportData.value.completeTotal = data?.completeTotal || 0;
    }
  } catch (err) {
    console.log(err);
  }
};

getReportData();

// 催办
const UrgingBtn = async row => {
  try {
    const { code, message } = await billUrging({
      instanceId: row?.instanceId
    });
    if (code === 200) {
      NotifMessage.success(message);
    }
  } catch (err) {
    console.log(err);
  }
};
const getSectionDetail = () => {
  getSectionInfo({
    id: sectionId
  }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      sectiontDetail.value = data;
      getContractDocument(data);
    }
  });
};
const getPaymentTransferDetail = (secType: String) => {
  getPaymentTransfer({
    sectionId,
    secType,
    projectManageId
  }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      if (secType === "0") {
        paymentTransfer.value = {
          ...paymentTransfer.value,
          paymentAmountSum: data.paymentAmountSum,
          paymentAmountRate: data.paymentAmountRate
        };
      } else {
        paymentTransfer.value = {
          ...paymentTransfer.value,
          preTransferSum: data.preTransferSum,
          preTransferRate: data.preTransferRate,
          transferSum: data.transferSum,
          transferRate: data.transferRate
        };
      }
    }
  });
};

const getContractDocument = (item: any) => {
  getContractBook({
    id: item.id
  }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      const arr = data.map((val: any) => {
        return {
          ...val,
          name: val.fileName
        };
      });
      defaultFileList.value = arr;
    }
  });
};

const copyText = (text: any) => {
  var textarea = document.createElement("textarea");
  textarea.style.position = "fixed";
  textarea.style.opacity = 0;
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  NotifMessage.success("复制成功");
};

const openDocument = (row: any) => {
  window.open(
    `${location.origin}${location.pathname}#/preview?uuidFile=${row.uuidFile}&fileName=${row.fileName}`
  );
};

const documenDownLoadClick = (row: any) => {
  downloadFile(row.uuidFile, row.fileName);
};

getSectionDetail();
getPaymentTransferDetail("0");
getPaymentTransferDetail("1");
if (sectionType === "1") {
  initTypeList();
  getData();
  getMonorList();
  getFlowStatus();
  getTableList(pageState);
} else {
  getEquipData();
}

onMounted(() => {
  if (sectionType !== "1") {
    return;
  }
  if (statusBarRef.value.offsetWidth <= amountRateRef.value.offsetWidth) {
    rateStyle.value = {
      left: "0",
      marginLeft: "0",
      right: "auto"
    };
  } else if (
    amountBarRef.value.offsetWidth - statusBarRef.value.offsetWidth <
    amountRef.value.offsetWidth + 6
  ) {
    rateStyle.value = {
      left: "auto",
      marginLeft: "auto",
      right: amountRef.value.offsetWidth + 6 + "px"
    };
  } else {
    rateStyle.value = {
      left: `${process.value}%`,
      marginLeft: -amountRateRef.value.offsetWidth + 6 + "px",
      right: "auto"
    };
  }
});

watch(
  () => swiperImgList.value,
  nV => {
    if (nV) {
      nextTick(initSwiper);
    }
  }
);

const clickImg = async item => {
  showDialog.value = true;
  showMore.value = false;
  if (activeImg.value) {
    activeImg.value.loading = true;
  }
  let { fileName: name, uuidFile } = item.recentlyUploadAttachment;
  let type = [name.slice(name.lastIndexOf("."), name.length)];
  let id = uuidFile.slice(uuidFile.lastIndexOf("/") + 1, uuidFile.length);
  let res = await previewImage(type, id);
  if (res.url) {
    item.url = res.url;
  }
  showMore.value = false;
  activeImg.value = item;
  activeImg.value.loading = false;
};

const handleCancel = () => {
  activeImg.value = null;
};
</script>

<style lang="scss" scoped>
.mb8 {
  margin-bottom: 8px;
}
.mb16 {
  margin-bottom: 16px;
}
.mb30 {
  margin-bottom: 30px;
}
.contractDetail {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  background: linear-gradient(154deg, #e6f2ff 0%, #ffffff 26%);
  border: 1px solid #ffffff;
  box-sizing: border-box;
  padding: 15px 20px 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
  .content {
    width: 100%;
    height: 57px;
    display: flex;
    position: relative;
    align-items: center;
    .type {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      line-height: 52px;
      color: #ffffff;
      text-align: center;
      margin-right: 8px;
    }
    .civilConstruction {
      background: linear-gradient(327deg, #198cff 30%, #10b9ff 92%);
    }
    .equipment {
      background: linear-gradient(331deg, #e88a48 22%, #f1b266 94%);
    }
    .serve {
      background: linear-gradient(320deg, #02c877 26%, #03e499 93%);
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .sectionName {
        width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: #333333;
      }
      .sectionCode {
        margin-top: 4px;
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        font-weight: 500;
        color: #666666;
        .copy {
          cursor: pointer;
        }
      }
    }
    .checkDocument {
      position: absolute;
      right: 0;
      top: 0;
      height: 22px;
      font-weight: 500;
      color: #0073e5;
      &:hover {
        .documentList {
          display: block;
        }
      }
      .checkSpan {
        cursor: pointer;
        font-size: 14px;
        line-height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .documentList {
        display: none;
        background: #ffffff;
        position: absolute;
        z-index: 9999;
        right: 0;
        top: 22px;
        box-sizing: border-box;
        padding: 16px;
        box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
        .documentItem {
          width: 250px;
          display: flex;
          height: 28px;
          font-size: 14px;
          line-height: 28px;
          color: #333333;
          text-align: right;
          cursor: pointer;
          .documentName {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            line-height: 28px;
            color: #0073e5;
          }

          .documenDownLoad {
            color: #0073e5;
            line-height: 28px;
            margin-left: 8px;
          }
        }
      }
    }
  }
  .moneyDatail {
    flex: 1;
    margin-top: 19px;
    width: 100%;
    display: flex;
    .label {
      width: 100%;
      height: 22px;
      font-weight: 500;
      line-height: 22px;
      font-size: 12px;
      color: #333333;
    }
    .value {
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
      color: #333333;
    }
    .sectiontMoney {
      width: 328px;
      height: 96px;
      border-radius: 8px;
      background: linear-gradient(
        180deg,
        #eeeeee 0%,
        rgba(238, 238, 238, 0) 100%
      );
      box-sizing: border-box;
      padding: 16px;
      display: flex;
      position: relative;
      .contractAmount,
      .currencyAmountNoTax {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .currencyAmountNoTax {
        text-indent: 10px;
      }
      .sectiontline {
        width: 1px;
        height: 40px;
        background: #dce2ea;
        position: absolute;
        left: 50%;
        top: 22px;
      }
    }
    .paymentAmount,
    .preTransfer,
    .transfer {
      width: 260px;
      height: 96px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 16px;
      margin-left: 14px;
      position: relative;

      .rate {
        margin-top: 5px;
      }
      .tag {
        position: absolute;
        right: 0;
        top: 0;
        width: 65px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
      }
    }
    .paymentAmount {
      background: linear-gradient(
        180deg,
        #fff7ed 0%,
        rgba(255, 247, 237, 0) 100%
      );
    }
    .preTransfer {
      background: linear-gradient(
        177deg,
        #edf4ff 6%,
        rgba(237, 244, 255, 0) 93%
      );
      .tag {
        background: url(../../assets/preTransferTag.png) no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .transfer {
      background: linear-gradient(
        180deg,
        #def3ee 0%,
        rgba(222, 243, 238, 0) 83%
      );
      .tag {
        background: url(../../assets/transferTag.png) no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
}
.flex {
  display: flex;

  :deep(.el-table.el-table--small) {
    border-top: none;
  }
  :deep(.el-table th.el-table__cell.is-leaf),
  :deep(.el-table td.el-table__cell) {
    border-bottom: none;
  }
  .info-box {
    display: flex;
    align-items: center;
    flex: 1;
    height: 80px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    margin-right: 8px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
    &:last-child {
      margin-right: 0;
    }
    .text {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #494c53;
      line-height: 20px;
    }
    .number {
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC, Helvetica Neue, Helvetica,
        Microsoft YaHei, Arial, sans-serif;
      font-weight: 600;
      color: #8895b7;
      text-align: left;

      &.center {
        text-align: center;
      }
      &.min {
        font-size: 14px;
        margin-top: 2px;
      }
    }
  }
  .chart-wrap {
    flex: 1;
    height: 300px;
    background: rgba(121, 155, 251, 0.02);

    // 饼图
    &.pie {
      position: relative;
      height: 174px;
      .rate-num {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: -40px;
        margin-top: -40px;
        color: #494c53;
        .num {
          font-size: 26px;
          font-weight: 600;
          line-height: 30px;
        }
        .text {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }

    &.h240 {
      height: 240px;
    }
    &.h232 {
      height: 232px;
    }
  }

  .static-box {
    // height: 100%;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
    border-radius: 2px;
    .title-doc {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #494c53;
      line-height: 20px;
      white-space: nowrap;
    }
  }

  .left {
    width: 40%;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    .chart-box {
      flex: 1;
      padding: 16px;
      .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 2px;
        .icon-wrap {
          // flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          background: rgba(82, 152, 255, 0.05);
          border-radius: 4px;
          margin-left: 4px;
          cursor: pointer;

          // .custom-select {
          //   width: 172px !important;
          //   :deep(.el-input__inner) {
          //     border-color: rgba(82, 152, 255, 0.05) !important;
          //     background-color: rgba(82, 152, 255, 0.05);
          //   }
          // }
        }
      }
    }
  }
  .right {
    flex: 1;
    width: 60%;
    // 施工现场近况
    .scene {
      padding: 16px;
      .process {
        display: flex;
        align-items: center;
        width: 100%;
        height: 72px;
        overflow: hidden;
        border-radius: 8px;
        .label-text {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 136px;
          height: 72px;
          background: rgba(82, 152, 255, 0.1);
          .icon {
            width: 40px;
            height: 40px;
          }
          .text {
            width: 32px;
            height: 40px;
            font-size: 14px;
            font-weight: 500;
            color: #494c53;
            line-height: 20px;
            letter-spacing: 2px;
            margin-left: 12px;
            margin-right: 4px;
          }

          .iconf {
            margin-top: 18px;
          }
        }
        .pro-box {
          flex: 1;
          width: 100%;
          height: 100%;
          background: rgba(82, 152, 255, 0.04);
          padding: 16px 16px 12px;
          .bar-bg {
            position: relative;
            height: 16px;
            background: rgba(82, 152, 255, 0.2);
            border-radius: 8px;
            overflow: hidden;
            .bar-status {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              background: #5298ff;
            }
          }
          .text-bar {
            position: relative;
            width: 100%;
            height: 28px;
            .bar-amount {
              position: absolute;
              right: 0;
              bottom: 0;
              font-size: 14px;
              font-weight: 500;
              color: #494c53;
              line-height: 20px;
              &.rate {
                right: auto;
                color: #5298ff;
              }
            }
          }
        }
      }
      .photo-box {
        .label-text {
          font-size: 14px;
          font-weight: 500;
          color: #494c53;
          line-height: 20px;
        }
        .swipers {
          position: relative;
          height: 172px;
          background: rgba(82, 152, 255, 0.04);
          border-radius: 8px;
          padding: 16px 24px;
          .swiper {
            --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
            --swiper-navigation-color: #494c53; /* 单独设置按钮颜色 */
            --swiper-navigation-size: 20px; /* 设置按钮大小 */
            .swiper-slide {
              position: relative;
              height: 140px;
              max-width: 172px;
              margin-right: 8px;
              border-radius: 8px;
              background: #e4ebfe;
              overflow: hidden;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
                max-width: 100%;
              }
              .text-box {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 48px;
                background: rgba(0, 21, 43, 0.8);
                border-radius: 0px 0px 8px 8px;
                padding: 6px 8px;
                .text {
                  font-size: 12px;
                  line-height: 17px;
                  color: #fdfdff;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  &.mt2 {
                    margin-top: 2px;
                  }
                }
              }
            }
          }
          /*去掉默认CSS样式*/
          .swiper-button-prev:after,
          .swiper-button-next:after {
            display: none;
          }
          /*自定义CSS样式*/
          .swiper-button-prev,
          .swiper-button-next {
            position: absolute;
            width: 24px;
            height: 24px;
            left: 0%;
            top: 50%;
            margin-top: -12px;
            background: transparent;
            text-align: center;
            i {
              font-weight: normal;
              font-size: 24px;
              color: #494c53;
            }
          }
          .swiper-button-next {
            top: 50%;
            right: 0%;
            left: auto;
            bottom: 10px;
          }
          .swiper-button-prev.swiper-button-disabled,
          .swiper-button-next.swiper-button-disabled {
            opacity: 0;
          }
        }
      }
    }

    // 验收单据统计
    .doc {
      padding: 16px 8px 16px 16px;
      .title-doc {
        margin-bottom: 4px;
      }
      .num-wrap {
        flex: 1;
        padding-top: 18px;
        .num-wrap-title {
          width: 200px;
          height: 40px;
          margin-top: -40px;
          p {
            font-size: 14px;
            color: #494c53;
          }
        }
        .num-box {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          height: 72px;
          background: rgba(69, 128, 217, 0.04);
          border-radius: 8px;
          border-style: ridge;
          border-width: 1px;
          border-color: rgba(5, 47, 110, 0.15);
          text-align: center;

          span {
            font-size: 12px;
            color: #494c53;
            &.num {
              font-size: 28px;
              font-weight: 600;
              margin-left: 12px;
            }
          }
        }
      }
    }
  }
}

.my-dialog {
  // :deep(.el-dialog .el-dialog__body) {
  //   padding-bottom: 18px;
  // }
  .d-box {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 8px;
    &.h24 {
      height: 24px;
    }
    &.d-flex {
      display: flex;
      justify-content: space-between;
    }
    .d-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      .d-line {
        width: 2px;
        height: 12px;
        background: #e4e8f2;
        border-radius: 1px;
        margin-left: 9px;
        margin-right: 9px;
      }
    }
    .d-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #5298ff;
      cursor: pointer;
      i {
        font-size: 20px;
        margin-left: 2px;
      }
    }
  }
  .img-wrap {
    height: 662px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
    border-radius: 2px;
    padding: 16px;
    text-align: center;
    overflow: hidden;
    .img-box-1 {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      text-align: center;
      overflow: hidden;
    }
    img {
      // width: 100%;
      max-width: 100%;
      // max-height: 100%;
    }
  }
  .d-box-wrap {
    // height: 662px;
    background: #ffffff;
    margin-bottom: 20px;
    .d-wrap {
      box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
      border-radius: 2px;
      padding: 8px 4px 12px 12px;
      line-height: 0;
      margin-bottom: 8px;
      p {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #495164;
      }
      .d-img-flex {
        display: flex;
        flex-wrap: wrap;
      }
      .img-box-2 {
        width: 172px;
        height: 140px;
        border-radius: 4px;
        margin-top: 8px;
        text-align: center;
        overflow: hidden;
        margin-right: 8px;
      }
      img {
        // width: 100%;
        max-width: 100%;
        // max-height: 100%;
      }
    }
  }
  .ml10 {
    margin-left: 10px;
  }
  .back {
    font-size: 14px;
    color: #5298ff;
    margin-right: 10px;
  }
  .scroll-content {
    height: 662px;
    overflow: auto;
    // padding-bottom: 20px;
  }
}
</style>
